﻿<phone:PhoneApplicationPage
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:controls="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    xmlns:controlsPrimitives="clr-namespace:Microsoft.Phone.Controls.Primitives;assembly=Microsoft.Phone.Controls" 
    xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
    x:Class="RedditWP.MainPage" 
    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="800" 
    SupportedOrientations="Portrait"  Orientation="Portrait"
    shell:SystemTray.IsVisible="False">

	<phone:PhoneApplicationPage.Resources>
		<Style x:Key="redditPanorama" TargetType="controls:Panorama">
			<Setter Property="ItemsPanel">
				<Setter.Value>
					<ItemsPanelTemplate>
						<controlsPrimitives:PanoramaPanel x:Name="panel"/>
					</ItemsPanelTemplate>
				</Setter.Value>
			</Setter>
			<Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
			<Setter Property="Background" Value="Transparent"/>
			<Setter Property="Template">
				<Setter.Value>
					<ControlTemplate TargetType="controls:Panorama">
						<Grid>
							<Grid.RowDefinitions>
								<RowDefinition Height="auto"/>
								<RowDefinition Height="*"/>
							</Grid.RowDefinitions>
							<controlsPrimitives:PanningBackgroundLayer x:Name="BackgroundLayer" HorizontalAlignment="Left" Grid.RowSpan="2">
								<Border x:Name="background" Background="{TemplateBinding Background}" CacheMode="BitmapCache"/>
							</controlsPrimitives:PanningBackgroundLayer>
							<controlsPrimitives:PanningTitleLayer x:Name="TitleLayer" CacheMode="BitmapCache" ContentTemplate="{TemplateBinding TitleTemplate}" Content="{TemplateBinding Title}" FontSize="187" FontFamily="{StaticResource PhoneFontFamilyLight}" Foreground="Black" HorizontalAlignment="Left" Margin="10,-76,0,9" Grid.Row="0"/>
							<controlsPrimitives:PanningLayer x:Name="ItemsLayer" HorizontalAlignment="Left" Grid.Row="1">
								<ItemsPresenter x:Name="items"/>
							</controlsPrimitives:PanningLayer>
						</Grid>
					</ControlTemplate>
				</Setter.Value>
			</Setter>
		</Style>
	</phone:PhoneApplicationPage.Resources>
 
    <!--Panorama-based applications should not show an ApplicationBar-->

	<phone:PhoneApplicationPage.FontFamily>
		<StaticResource ResourceKey="PhoneFontFamilyNormal"/>
	</phone:PhoneApplicationPage.FontFamily>
	<phone:PhoneApplicationPage.FontSize>
		<StaticResource ResourceKey="PhoneFontSizeNormal"/>
	</phone:PhoneApplicationPage.FontSize>
	<phone:PhoneApplicationPage.Foreground>
		<StaticResource ResourceKey="PhoneForegroundBrush"/>
	</phone:PhoneApplicationPage.Foreground>

    <!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot" Background="Transparent">

        <StackPanel x:Name="stackLoading">
            <Image Source="/SplashScreenImage.jpg" />
            <toolkit:PerformanceProgressBar x:Name="progressBar" IsIndeterminate="True" Margin="0, -400, 0, 0" Foreground="White"></toolkit:PerformanceProgressBar>
        </StackPanel>

        <!--  Visibility="Collapsed" -->
        <!--Panorama control-->
        <controls:Panorama x:Name="panoReddit" Background="White" Style="{StaticResource redditPanorama}" Visibility="Collapsed">

            <controls:Panorama.Title>
                <StackPanel Orientation="Horizontal">
                    <Image Source="/images/reddit-alien.png" Height="198" Width="150" Margin="0,0,0,0"/>
                    <TextBlock Text="reddit" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}" FontSize="187" Foreground="Black" />
                </StackPanel>
                
            </controls:Panorama.Title>
            
            <!--Reddit "What's Hot"-->
            <controls:PanoramaItem Header="what's hot?" Foreground="Black">
                <!--Double line list with text wrapping-->
                <ListBox Margin="0,0,-12,0" ItemsSource="{Binding SubmissionList}">
                    <!-- This is for a demo. Don't shoot me for keeping a cheat sheet -->
                    <!-- 
                    <ListBox.ItemsPanel>
                        <ItemsPanelTemplate>
                            <StackPanel>
                            </StackPanel>
                        </ItemsPanelTemplate>
                    </ListBox.ItemsPanel>
                    -->
                    <ListBox.ItemTemplate>
                        <DataTemplate>
                            <Grid Margin="0,0,0,5">
                                
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="70"/>
                                    <ColumnDefinition Width="*"/>
                                </Grid.ColumnDefinitions>

                                <Image 
                                       Margin="0,0,0,0" Width="70" Grid.Column="0">
                                    <Image.Source>
                                        <BitmapImage UriSource="{Binding data.thumbnail}" CreateOptions="BackgroundCreation">

                                        </BitmapImage>
                                    </Image.Source>
                                </Image>

                                <TextBlock Text="{Binding data.title}" TextWrapping="Wrap" Style="{StaticResource blackTextblock}" Foreground="Black" Grid.Column="1" Margin="8,0,0,8" />

                            </Grid>
                        </DataTemplate>
                    </ListBox.ItemTemplate>
                </ListBox>
            </controls:PanoramaItem>
 
            <!--Reddit List of Reddits-->
            <!--Use 'Orientation="Horizontal"' to enable a panel that lays out horizontally-->
            <controls:PanoramaItem Header="Reddits" Foreground="Black">
                <!--Double line list with image placeholder and text wrapping-->
                <ListBox Margin="0,0,-12,0" ItemsSource="{Binding SubReddits}">
                    <ListBox.ItemTemplate>
                        <DataTemplate>
                            <StackPanel Orientation="Horizontal" Margin="0,0,0,17">
                                <Image Source="{Binding Image}" Width="120" Height="40"/>
                                <StackPanel Width="311">                                    
                                    <TextBlock Text="{Binding Name}" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}" Foreground="Black"/>
                                </StackPanel>
                            </StackPanel>
                        </DataTemplate>
                    </ListBox.ItemTemplate>
                </ListBox>
            </controls:PanoramaItem>

            <!--Reddit List of Reddits-->
            <!--Use 'Orientation="Horizontal"' to enable a panel that lays out horizontally-->
            <controls:PanoramaItem Header="Pics" Foreground="Black" Orientation="Horizontal" Width="722">
                <!--Double line list with image placeholder and text wrapping-->
                <toolkit:WrapPanel Orientation="Vertical" x:Name="wrapPics">
                    
                </toolkit:WrapPanel>
            </controls:PanoramaItem>

            <!--About Reddit (or blog?)-->
            <!--Use 'Orientation="Horizontal"' to enable a panel that lays out horizontally-->
            <controls:PanoramaItem Header="About" Foreground="Black">
                <!--Double line list with image placeholder and text wrapping-->
                <StackPanel>
                    <TextBlock Style="{StaticResource blackTextblock}"><Run Text="Hi there!"/></TextBlock>
                </StackPanel>
            </controls:PanoramaItem>
        </controls:Panorama>
    </Grid>

</phone:PhoneApplicationPage>